<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>飞得快-航班查询</title>
    <!--Bootstrap-->

    <!--
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    -->

    <link  href="../static/bootstrap-3.3.7/css/bootstrap.min.css" th:href="@{bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" media="all" href="../static/css/tyle.css" th:href="@{css/tyle.css}">
    <script src="../static/bootstrap-3.3.7/js/jquery-1.11.3.min.js" th:src="@{bootstrap-3.3.7/js/jquery-1.11.3.min.js}"  type="text/javascript"></script>
    <script src="../static/bootstrap-3.3.7/js/bootstrap.min.js" th:src="@{bootstrap-3.3.7/js/bootstrap.min.js}" type="text/javascript"></script>
    <script src="../static/My97DatePicker/WdatePicker.js" th:src="@{My97DatePicker/WdatePicker.js}" type="text/javascript" ></script>

    <style type="text/css">
        body{
            background-color: #f1f2f6;
        }

        .foot{
            position:relative;
            bottom:0;
            height: 100px;
            margin-top: 50px;
            padding-top: 30px;
            width: 100%;
            text-align:center;
            background-color: white;
            font-size: 12px;
        }


    </style>
</head>
<body>
<!--  	描述：导航条    -->
<nav class="navbar navbar-default" role="navigation" style="background-color: white; height: 80px;margin-bottom: 0px">
    <div class="container">
        <div class="row">
            <div class="navbar-header">
                <a class="navbar-brand" href="">
                    <i style="display: inline-block;background-color: #5cb85c; width: 150px;height:50px;
                        background: url(../static/img/bg/piaodekuai.png) no-repeat center; background-size: 100px 50px; "></i>
                    <!-- <span style="color:#0652DD; font-size:30px;width: 30px;">飘得快</span>-->
                </a>
            </div>
            <!--<div class="nav navbar-nav" style="width: 80%;padding-top: 25px;padding-left: 80px">
                <a href=""><span style="float: left;font-size: 20px">首页&nbsp;</span></a>
                <div style="float: left;border-bottom: 1px solid #dbdbdb;width: 30%;margin-top: 15px;"></div>
                <span style="color: #ffa801;float: left;font-size: 20px">&nbsp;&nbsp;登录中心</span>
            </div>-->
            <div th:if="${not haveUser}" class="nav navbar-nav navbar-right" style="padding-top: 25px; margin-right: 0px">
                <a href="/login">
                    <span class="fcolor glyphicon glyphicon-user" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >登录</span>
                </a>
                &nbsp;&nbsp;
                <a href="/register">
                    <span class="fcolor glyphicon glyphicon-pencil" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >注册</span>
                </a>
            </div>
            <div th:if="${haveUser}" class="nav navbar-nav navbar-right" style="padding-top: 25px; margin-right: 0px">
                <a href="/customerCenter">
                    <span class="fcolor glyphicon glyphicon-user" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >你好,李白</span>
                </a>
                &nbsp;&nbsp;
                <a href="/quit">
                    <span class="fcolor glyphicon glyphicon-pencil" style="color: #6A6AFF;font-size: 20px"></span>
                    <span style="color: #1e272e;font-size: 15px" >退出</span>
                </a>
            </div>
        </div>
    </div>
</nav>



<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 450px;margin-top: 30px; position: relative;">
   <!-- <h2 id="shouye">首页</h2>-->
    <!--轮播区域-->
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="1700">
        <!--轮播指标-->
        <ol class="carousel-indicators" style="left: 1000px" >
            <li data-target="#myCarousel" data-slide-to="0" class="active" ></li>
            &nbsp;&nbsp;
            <li data-target="#myCarousel" data-slide-to="1" ></li>
            &nbsp;&nbsp;
            <li data-target="#myCarousel" data-slide-to="2" ></li>
            &nbsp;&nbsp;
            <li data-target="#myCarousel" data-slide-to="3" ></li>
        </ol>
        <!--轮播指标-->
        <!--轮播项目-->
        <div class="carousel-inner" style="height: 480px;">

            <div class="item active"  style="width: 1920px; height: 480px; background-repeat: no-repeat; background-size: 100% 100%;
            background-image: url(../static/img/lunbo/lunbo1.jpg);">
                <!--<img src="../static/img/lunbo/lunbo1.jpg" alt="First slide" style="height: 450px">-->
                <!--<div class="carousel-caption">书店</div>-->
            </div>
            <div class="item" style="width: 1920px; height: 480px; background-repeat: no-repeat; background-size: 100% 100%;
            background-image: url(../static/img/lunbo/lunbo2.jpg);">
               <!-- <img src="../static/img/lunbo/lunbo2.jpg" alt="First slide" style="height: 450px">-->
                <!--<div class="carousel-caption">书店</div>-->
            </div>
            <div class="item" style="width: 1920px; height: 480px; background-repeat: no-repeat; background-size: 100% 100%;
            background-image: url(../static/img/lunbo/lunbo3.png);">
                <!--<img src="../static/img/lunbo/lunbo3.png" alt="First slide" style="height: 450px">-->
                <!--<div class="carousel-caption">书店</div>-->
            </div>
            <div class="item" style="width: 1920px; height: 480px; background-repeat: no-repeat; background-size: 100% 100%;
            background-image: url(../static/img/lunbo/lunbo4.jpg);">
               <!-- <img src="../static/img/lunbo/lunbo4.jpg" alt="First slide" style="height: 450px">-->
                <!--<div class="carousel-caption">书店</div>-->
            </div>

d
            sfsgfdsfwr
        </div>
        <!--轮播控制器-->
        <!--<a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>-->
        <!--轮播控制器-->
    </div>



    <div class="container" style="position:absolute;left:250px;top:80px; width: 550px" >
        <div class="row"  style="background-color: white;
         -moz-box-shadow: 0px 1px 2px  #909090;-webkit-box-shadow: 0px 1px 2px  #909090;">
            <div>
                <form class="form-horizontal" role="form" action="/oneway" method="post">
                    <div class="form-group" style="margin-bottom: 2px">
                        <span class="col-md-3 control-label" style="color:#0984e3; text-align: left; font-size:20px;margin-left: 10px">国内机票</span>
                    </div>
                    <div class="form-group">
                        <div style="border-bottom: 2px solid #f1f2f6; width: 90%; margin-left: 20px"></div>
                    </div>
                    <div class="form-group">
                        <span class="col-md-2 control-label">航程类型</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <label class="radio-inline">
                            <input id="oneway" type="radio" name="optionsRadios"  value="option1" checked> 单程
                        </label>
                        <label class="radio-inline">
                            <input id="twoway" type="radio" name="optionsRadios"  value="option2">往返
                        </label>
                    </div>
                    <div class="form-group">
                        <span for="fc" class="col-md-2 control-label">出发城市</span>
                        <div class="col-md-3" style="padding-left: 0px;">
                            <input type="text" class="form-control" style="width: 156px;" autocomplete="off" id="place" placeholder="中文 | 城市">

                        </div>
                        <span for="fd" class="col-md-2 control-label" style="padding-right: 0px;">出发日期</span>
                        <div class="col-md-3">
                            <input type="text" class="form-control Wdate" autocomplete="off"  id="fd" placeholder="YYYY-MM-DD" style="height: 34px;width: 156px;"
                                   onclick="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',maxDate:'%y-%M-{%d+35}'})">
                        </div>

                    </div>
                    <div class="form-group">
                        <span for="tc" class="col-md-2 control-label">到达城市</span>
                        <div class="col-md-3" style="padding-left: 0px;">
                            <input type="text" class="form-control" style="width: 156px;" autocomplete="off" id="destination" placeholder="中文 | 城市">
                        </div>
                        <span for="bd" class="col-md-2 control-label"  style="padding-right: 0px;">返程日期</span>
                        <div class="col-md-3">
                            <input type="text" class="form-control Wdate" autocomplete="off" disabled="disabled" id="bd" placeholder="YYYY-MM-DD" style="height: 34px;width: 156px;"
                                   onclick="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',maxDate:'%y-%M-{%d+35}'})">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-5 checkbox" style="padding-left:50px ">
                            <label class="radio-inline" >
                                <input type="checkbox" name=""  value="">带儿童
                            </label>
                            <label class="radio-inline">
                                <input type="checkbox" name=""  value="">带婴儿
                            </label>
                        </div>

                        <span class="col-md-2 control-label" style="padding-right: 0px;">舱位等级</span>
                        <div class="col-md-3">
                            <select class="form-control" style="width: 156px;">
                                <option value="">经济舱</option>
                                <option value="">头等舱</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-4" style="padding-left: 50px">
                            <a href="" style="text-decoration: none">儿童婴儿预定说明</a>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-7 col-md-4 " >
                            <input id="search" class="btn-block btn btn-warning" type="submit"  style=" width: 152px;" value="搜索机票">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>


</div>






<div id="in_city" style="display: none"></div>
<div id="mesg" style="display: none;position:absolute; padding-left: 5px; padding-top: 2px; margin-top: 5px; border: 1px solid #7f8fa6">
    <!--<span class="glyphicon glyphicon-minus-sign" style="color: #e84118; font-size: 8px"></span>
    <span  style="font-size: 11px; color: #636e72">请选择出发城市</span>-->
</div>
<!--<div class="foot">
    <p>网站导航 | 宾馆索引 | 用户协议 | 关于携程 | 企业公民 | 诚聘英才 | 分销联盟 | 企业礼品卡采购 | 代理合作 | 广告业务 | 联系我们 | 返回旧版</p>
    <span>Copyright © 2019-2019, 第九组 All rights reserved.</span>
</div>-->

<!-- 城市 -->

<div class="foot">
    <p>网站导航 | 宾馆索引 | 用户协议 | 关于携程 | 企业公民 | 诚聘英才 | 分销联盟 | 企业礼品卡采购 | 代理合作 | 广告业务 | 联系我们 | 返回旧版</p>
    <span>Copyright © 2019-2019, 第九组 All rights reserved.</span>
</div>



<script type="text/javascript" src="../static/js/cityTemplate.js" th:src="@{js/cityTemplate.js}"></script>
<script type="text/javascript">

    var cityA = $(".city_a_le1 a"); //城市
    var pla = $("#place");  //出发地
    var dest = $("#destination");  //目的地
    // 默认值
    inCity.width = "345";  //城市选择框  宽
    inCity.height = "auto";  //城市选择框  高
    inCity.id = "#in_city";  //城市选择框  父级ID
    inCity.Children = '.city_a_le1';  //城市名box
    // 初始化 城市HTML模板
    $(inCity.id).prepend(inCity._template.join(''));
    inCity.Hot(cityA);

    //城市 导航
    var apay = $(".screen a");

    var placeThis; //当前选择标签
    var clickThis; //当前选择标签
    apay.click(function(obj){  //城市导航
        inCity.payment($(this));
    })

    inCity.place(pla); //出发地
    inCity.destination(dest);  //目的地
    inCity.cityClick(cityA); //显示赋值城市
    //inCity.explace();

    $('body').click(function(){
        $(inCity.id).hide();
    });

    /*   $('body').on('click',function () {
            //clickThis = $(this);
            //alert("22");
            var div = $("#in_city");
            var x=event.clientX;
            var y=event.clientY;
            var divx1 = div.offsetLeft;
            var divy1 = div.offsetTop;
            var divx2 = div.offsetLeft + div.offsetWidth;
            var divy2 = div.offsetTop + div.offsetHeight;
            if ( x < divx1 || x > divx2 || y < divy1 || y > divy2){
                $(inCity.id).hide();
            }

        });*/


    //默认日期属性
    var now = new Date();
    //格式化日，如果小于9，前面补0
    var day = ("0" + now.getDate()).slice(-2);
    //格式化月，如果小于9，前面补0
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    //拼装完整日期格式
    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
    //完成赋值
    // alert(today);
    $("#fd").val(today);



    $('#oneway').click(function(){
        $('#bd').attr("disabled",true);
    })

    $('#twoway').click(function(){
        $('#bd').attr("disabled",false);
    });


    /*
    $(function () {
        $("#bd").on('blur focus',function(){
            //alert("111");
            if ($("#bd").val() == "" || $.trim($("#bd").val()).length == 0){
                //alert("222");
                /!*$('#oneway').attr("checked", "checked");
                $('#twoway').removeAttr("checked");*!/
                $("input[name='optionsRadios']").get(0).checked=true;
                $("input[name='optionsRadios']").get(1).checked=false;
            }else {
               //alert("333");
                /!*$('#twoway').attr("checked", "checked");
                $('#oneway').removeAttr("checked");*!/
                $("input[name='optionsRadios']").get(1).checked=true;
                $("input[name='optionsRadios']").get(0).checked=false;
            }

        });

    });*/


    $("#search").click(function(){

        var startTime=$("#fd").val();
        var start=new Date(startTime.replace("-", "/").replace("-", "/"));
        var endTime=$("#bd").val();
        var end=new Date(endTime.replace("-", "/").replace("-", "/"));


        if($("#place").val() == "" || $.trim($("#place").val()).length == 0){

            var x = $("#place").offset().top ;
            var y = $("#place").offset().left + 165 ;
            //alert(x + " " + y);
            $("#mesg").css({"background-color":"#F8EFBA","top":x+"px","left":y+"px","width":130+"px","height":25+"px"});
            $("#mesg").html("<span class=\"glyphicon glyphicon-minus-sign\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                "    <span  style=\"font-size: 11px; color: #636e72\">请选择出发城市</span>");
            $("#mesg").show();

            return false;
        }else if($("#destination").val() == "" || $.trim($("#destination").val()).length == 0) {
            var x2 = $("#destination").offset().top ;
            var y2 = $("#destination").offset().left + 165 ;
            //alert(x + " " + y);
            $("#mesg").css({"background-color":"#F8EFBA","top":x2+"px","left":y2+"px","width":130+"px","height":25+"px"});
            $("#mesg").html("<span class=\"glyphicon glyphicon-minus-sign\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                "    <span  style=\"font-size: 11px; color: #636e72\">请选择到达城市</span>");
            $("#mesg").show();

            return false;
        }else if($("#destination").val() == $("#place").val()) {
            var x2 = $("#destination").offset().top ;
            var y2 = $("#destination").offset().left + 165 ;
            //alert(x + " " + y);
            $("#mesg").css({"background-color":"#F8EFBA","top":x2+"px","left":y2+"px","width":180+"px","height":25+"px"});
            $("#mesg").html("<span class=\"glyphicon glyphicon-minus-sign\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                "    <span  style=\"font-size: 11px; color: #636e72\">出发城市和到达城市不能相同</span>");
            $("#mesg").show();

            return false;
        }else if(end < start) {

            /*
            var dateTime=new Date();
            //alert("dd11");
            dateTime=dateTime.setDate(dateTime.getDate()-1);
            //alert("dd22");
            //alert(dateTime.toLocaleDateString());

            dateTime2=new Date(dateTime);
            //alert(dateTime.toLocaleDateString());
            alert("dd33");
            //格式化日，如果小于9，前面补0
            var day2 = ("0" + dateTime2.getDate()).slice(-2);
            //alert(day2);
            alert("dd55");
            //格式化月，如果小于9，前面补0
            var month2 = ("0" + (dateTime2.getMonth() + 1)).slice(-2);
            alert("dd66");
            //拼装完整日期格式
            var today2 = dateTime2.getFullYear()+"-"+(month2)+"-"+(day2) ;
            alert("dd77");
            //完成赋值
            alert(today);
            alert(today2);*/
            $("#mesg").hide();
            $("#bd").val();
            $("#fd").val($("#bd").val()) ;

            return false;

        }else if($("#fd").val() == "" || $.trim($("#fd").val()).length == 0) {

            $("#fd").val(today);
            $("#mesg").hide();
            $("input[name='optionsRadios']").get(0).checked=true;
            $("input[name='optionsRadios']").get(1).checked=false;
            return true;

        }else {

            document.form.action = "http://www.baidu.com";
            document.form.submit();
            return true;
        }

    });











</script>

</body>
</html>